<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .order-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-waiting {
            background-color: #fff6e9;
            color: #e67e22;
        }
        .status-ready {
            background-color: #e6f9ef;
            color: #2ecc71;
        }
        .status-completed {
            background-color: #e5f3fe;
            color: #3498db;
        }
        .status-canceled {
            background-color: #feeaec;
            color: #e74c3c;
        }
        .tab-menu {
            display: flex;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 16px;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            color: #666;
        }
        .tab-item.active {
            color: #fd79a8;
            border-bottom: 2px solid #fd79a8;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="wechat-header">
            我的订单
        </div>
        
        <div class="wechat-content">
            <!-- Order Tabs -->
            <div class="tab-menu">
                <div class="tab-item active">全部</div>
                <div class="tab-item">等待中</div>
                <div class="tab-item">进行中</div>
                <div class="tab-item">已完成</div>
            </div>
            
            <!-- Order List -->
            <div class="wechat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <div class="font-bold">林夕摄影</div>
                        <div class="text-sm text-gray mt-1">基础写真套餐</div>
                    </div>
                    <div class="order-status status-waiting">等待中</div>
                </div>
                
                <div class="wechat-divider"></div>
                
                <div class="flex items-center justify-between">
                    <div class="text-sm">
                        <div>订单号：P202406150034</div>
                        <div class="mt-1">预约时间：6月15日 11:30</div>
                    </div>
                    <div class="bg-pink-100 text-pink rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">4</div>
                </div>
                
                <div class="flex justify-between mt-3">
                    <div class="text-sm text-gray">总价: <span class="text-pink font-bold">¥199</span></div>
                    <div>
                        <button class="bg-white border border-gray-300 text-sm px-3 py-1 rounded mr-2">取消</button>
                        <button class="bg-pink-100 text-pink border border-pink-200 text-sm px-3 py-1 rounded">查看</button>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <div class="font-bold">青木影像工作室</div>
                        <div class="text-sm text-gray mt-1">高级写真套餐</div>
                    </div>
                    <div class="order-status status-completed">已完成</div>
                </div>
                
                <div class="wechat-divider"></div>
                
                <div class="flex items-center justify-between">
                    <div class="text-sm">
                        <div>订单号：P202405280021</div>
                        <div class="mt-1">拍摄时间：5月28日 14:00</div>
                    </div>
                </div>
                
                <div class="flex justify-between mt-3">
                    <div class="text-sm text-gray">总价: <span class="text-pink font-bold">¥299</span></div>
                    <div>
                        <button class="bg-white border border-gray-300 text-sm px-3 py-1 rounded mr-2">再次预约</button>
                        <button class="bg-pink-100 text-pink border border-pink-200 text-sm px-3 py-1 rounded">查看照片</button>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <div class="font-bold">星光摄影</div>
                        <div class="text-sm text-gray mt-1">基础写真套餐</div>
                    </div>
                    <div class="order-status status-ready">拍摄中</div>
                </div>
                
                <div class="wechat-divider"></div>
                
                <div class="flex items-center justify-between">
                    <div class="text-sm">
                        <div>订单号：P202406140019</div>
                        <div class="mt-1">拍摄时间：6月14日 16:30</div>
                    </div>
                </div>
                
                <div class="flex justify-between mt-3">
                    <div class="text-sm text-gray">总价: <span class="text-pink font-bold">¥149</span></div>
                    <div>
                        <button class="bg-pink-100 text-pink border border-pink-200 text-sm px-3 py-1 rounded">查看</button>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <div class="font-bold">光影记忆馆</div>
                        <div class="text-sm text-gray mt-1">豪华写真套餐</div>
                    </div>
                    <div class="order-status status-canceled">已取消</div>
                </div>
                
                <div class="wechat-divider"></div>
                
                <div class="flex items-center justify-between">
                    <div class="text-sm">
                        <div>订单号：P202405150008</div>
                        <div class="mt-1">预约时间：5月15日 10:00</div>
                    </div>
                </div>
                
                <div class="flex justify-between mt-3">
                    <div class="text-sm text-gray">总价: <span class="text-pink font-bold">¥399</span></div>
                    <div>
                        <button class="bg-white border border-gray-300 text-sm px-3 py-1 rounded mr-2">删除</button>
                        <button class="bg-pink-100 text-pink border border-pink-200 text-sm px-3 py-1 rounded">再次预约</button>
                    </div>
                </div>
            </div>
            
            <!-- Empty State (hidden by default) -->
            <div class="text-center mt-10 hidden">
                <i class="fas fa-clipboard-list text-gray-300 text-5xl"></i>
                <p class="text-gray-400 mt-3">暂无订单记录</p>
                <button class="wechat-btn mt-4" style="max-width: 200px; margin: 0 auto;">
                    去预约
                </button>
            </div>
        </div>
        
        <!-- Footer Navigation -->
        <div class="wechat-footer">
            <div class="wechat-tab">
                <i class="fas fa-camera"></i>
                <span>摄影师</span>
            </div>
            <div class="wechat-tab active">
                <i class="fas fa-list-alt"></i>
                <span>我的订单</span>
            </div>
            <div class="wechat-tab">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 